<template>
  <div class="box">
    <div class="item" v-for="item in props.items">
      <span class="name"> {{ item.name }}</span>
      <span v-if="show?.graphic" class="tag" style="margin-left: 10px">
        <el-tag @click="OpenNewTab(item)">WebGL</el-tag>
        <el-tag @click="OpenNewTab(item)">WebGPU</el-tag>
      </span>
      <span v-if="show?.single" class="tag" style="margin-left: 10px">
        <el-tag @click="OpenNewTab(item)">查看</el-tag>
      </span>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  show: {
    type: Object,
    default: {
      graphic: false,
      single: false,
    },
  },
});

const OpenNewTab = (item) => {
  if (item.path) {
    window.open(item.path);
  }
};
</script>

<style lang="scss" scoped>
.box {
  text-align: center;

  .item {
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px 0 0 10px;
    position: relative;
    background: purple;

    .name {
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .tag {
      position: absolute;
      right: 10px;
      bottom: 10px;
      cursor: pointer;
    }
  }
}
</style>
